<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">圈子分类</block>
		</cu-custom>
		<view class="flex justify-center align-center padding" style="width: 100%;">
			<text class="text-lg">选择圈子分类</text>
		</view>
		<view v-for="(item,index) in dataList" :key="index" style="width: 100%;">
			<view class="flex justify-around align-center padding-top" style="width: 100%;">
				<view v-for="(subItem,subIndex) in item" :key="subIndex">
					<view @tap="chooseItem(subItem)" :class="'cu-tag text-lg round padding '+[category.category_id==subItem.category_id?'bg-blue text-white':'bg-white text-black']">{{subItem.name}}</view>
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top"
				style="width: 100%;">
			<button @tap="commitAction()" :class="'cu-btn round '+themeColor" style="width: 65%;">确定</button>
		</view>
	</view>
</template>

<script>
	import {
		getCircleCategoryList
	} from '@/api/api.js'
	import {
		chunk
	} from '@/api/utils.js'
	export default {
		data() {
			return {
				themeColor:this.ThemeColor,
				category:null,
				dataList: []
			}
		},
		onLoad() {
			uni.showLoading({
				title:'正在加载...'
			})
			getCircleCategoryList().then(res=>{
				uni.hideLoading()
				this.dataList = chunk(res.data,4)
			}).catch(error=>{
				uni.hideLoading()
			})
		},
		methods: {
			chooseItem(item) {
				this.category=item
			},
			commitAction() 
			{
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('finishChoose', this.category);
				uni.navigateBack({
					delta:1
				})
			}
		},
	}
</script>

<style scoped>

</style>